<template>
  <div class="login-container row items-center justify-center">
    <q-form @submit="submit" class="layui-form">
    <div class="cc-login-form-item">
        <img class="logo" src="icons/logo/cc-admin-logo.svg"/>
        <div class="title">CC-ADMIN</div>
        <div class="desc">
            企业级快速开发平台
        </div>
    </div>
    <div class="cc-login-form-item">
        <q-input
          outlined
          v-model.trim="form.username"
          dense
          debounce="500"
          lazy-rules
          placeholder="用户名："
          hide-bottom-space
          bg-color="white"
          square
          :rules="[(val) => (val && val.length > 0) || '请输入用户名']"
        >
        </q-input>
    </div>
    <div class="cc-login-form-item">
        <q-input
          outlined
          clear-icon="cancel"
          :type="isPwd ? 'password' : 'text'"
          v-model.trim="form.password"
          dense
          bg-color="white"
          placeholder="密码："
          debounce="500"
          hide-bottom-space
          lazy-rules
          square
          :rules="[(val) => (val && val.length > 0) || '请输入密码']"
        >
          <template v-slot:append>
            <q-icon
              :name="isPwd ? 'visibility_off' : 'visibility'"
              class="cursor-pointer"
              @click="isPwd = !isPwd"
            />
          </template>
        </q-input>
    </div>
    <div class="cc-login-form-item">
        <q-input
          outlined
          v-model.trim="form.captcha"
          dense
          debounce="500"
          placeholder="验证码："
          bg-color="white"
          lazy-rules
          hide-bottom-space
          square
          :rules="[(val) => (val && val.length > 0) || '请输入验证码']"
        >
          <template v-slot:after>
            <img id="captcha" class="codeImage cursor-pointer" @click="captcha"/>
          </template>
        </q-input>
        
    </div>
    <div class="cc-login-form-item">
      <q-checkbox color="green-5" v-model="autoLogin" label="记住密码" />
    </div>
    <div class="cc-login-form-item">
        <q-btn
          dense
          unelevated
          label="登 录"
          size="17px"
          color="green-5"
          class="full-width no-border-radius q-pa-none"
          type="submit"
          :loading="loading"
        >
          <template v-slot:loading>
            <q-spinner-ios class="on-left" />登录...
          </template>
        </q-btn>
    </div>
</q-form>
  </div>
</template>

<script>
import { uid } from 'quasar'

export default {
  name: 'Login',
  data() {
    return {
      title: process.env.PRODUCT_NAME,
      form: {
        username: 'guest',
        password: '123456',
        captcha: '',
        checkKey: '',
      },
      isPwd: true,
      autoLogin: true,
      loading: false,
    };
  },
  methods: {
    imTr(menu) {
      const result = [];
      menu.forEach((v) => {
        result.push({
          ...v,
          component: () => import(`pages/${v.component}`),
          children: v.children ? this.imTr(v.children) : null,
        });
      });
      return result;
    },
    initMenu(menuInfo) {
      let { menu } = menuInfo;
      const { auth } = menuInfo;
      if (menu.length === 0) {
        this.$error('您没有任何可供访问的菜单，请联系管理员');
      }
      this.$store.commit('Rule/updateRoutes', menu);
      this.$store.commit('Rule/updateAuth', auth);
      menu = this.imTr(menu);
      this.$router.addRoute({
        path: '/',
        component: () => import('layouts'),
        redirect: '/home',
        children: menu,
      });
    },
    submit() {
      this.loading = true;
      this.$axios.post('/sys/login', this.form)
        .then((r) => {
          this.$store.commit('Rule/clear');
          this.$store.commit('User/updateAuthorization', r.result.token);
          this.$store.commit('User/updateInfo', r.result.userInfo);
          this.initMenu(r.result.permissionInfo);
          this.$router.push('/home');
        }).finally(() => {
          this.loading = false;
        });
    },
    captcha() {
      this.form.checkKey = uid();
      this.$axios.get(`/sys/randomImage/${this.form.checkKey}`).then((res) => {
          document.getElementById("captcha").src = res.result;
      });
    }
  },
  mounted() {
    if (this.$store.state.User.authorization) {
      this.$router.replace('#/home');
    } else {
      this.$store.commit('User/clear');
    }
    this.captcha();
  },
  computed: {
  },
};
</script>

<style lang="stylus">
.login-container
  width 100%
  height 100vh
  background-image url('~assets/login/background.svg')
  background-repeat no-repeat
  background-size 100% 100%
  position relative

.layui-form {
	width: 320px ;
}

.layui-form button {
	width: 100% ;
	height: 44px ;
	line-height: 44px ;
	font-size: 16px ;
	font-weight: 550 ;
}

.layui-tab-content {
	margin-top: 15px ;
	padding-left: 0px ;
	padding-right: 0px ;
}

.cc-login-form-item {
	margin-top: 20px ;
}
.cc-login-form-item .q-btn__wrapper {
  padding: 0em;
}
    
.layui-input {
	height: 44px ;
	line-height: 44px ;
	padding-left: 15px ;
	border-radius: 3px ;
}

.layui-input:focus {
	box-shadow: 0px 0px 2px 1px #5FB878 ;
}

.layui-form-danger:focus{
	box-shadow: 0px 0px 2px 1px #f56c6c ;
}

.logo {
	width: 60px ;
	margin-left: 20px ;
  transform: translateY(-6000px);
  filter: drop-shadow(#FF9933 0 6000px)
}

.title {
	font-size: 30px ;
	font-weight: 550 ;
	margin-left: 20px ;
	color: #5FB878 ;
	display: inline-block ;
	height: 60px ;
	line-height: 60px ;
	margin-top: 10px ;
	position: absolute ;
}

.desc {
	width: 100% ;
	text-align: center ;
	color: gray ;
	height: 60px ;
	line-height: 60px ;
}

body {
	background-repeat:no-repeat;
	background-color: whitesmoke;
	background-size: 100%;
	height: 100%;
}

.code {
	float: left;
	margin-right: 13px;
	margin: 0px ;
	border: #e6e6e6 1px solid;
	display: inline-block;
}

.codeImage {
	float: right;
  width: 160px;
	height: 42px;
	border: #781a1a 2px solid;
}

</style>
